<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>transition.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">transition.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="local_closure_goog_fx_css3_transition.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/fx/css3/transition.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/fx/css3/transition.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_fx_css3_Transition.html">
          goog.fx.css3.Transition</a><br/>
        <div class="class-details">A class to handle targeted CSS3 transition. This class
handles common features required for targeted CSS3 transition.

Browser that does not support CSS3 transition will still receive all
the events fired by the transition object, but will not have any transition
played. If the browser supports the final state as set in setFinalState
method, the element will ends in the final state.

Transitioning multiple properties with the same setting is possible
by setting Css3Property's property to 'all'. Performing multiple
transitions can be done via setting multiple initialStyle,
finalStyle and transitions. Css3Property's delay can be used to
delay one of the transition. Here is an example for a transition
that expands on the width and then followed by the height:

<pre class="lang-js prettyprint">
  initialStyle: {width: 10px, height: 10px}
  finalStyle: {width: 100px, height: 100px}
  transitions: [
    {property: width, duration: 1, timing: 'ease-in', delay: 0},
    {property: height, duration: 1, timing: 'ease-in', delay: 1}
  ]
</pre></div>
 </div>
      









<div class="section">
  <table class="horiz-rule">


  </table>
</div>










      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory css3</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/fx/css3/transition.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
